

/* 导航栏———————————————————————————————————————————————————————————— */
.header-wrap{
	z-index: 5;
	margin: 0 auto;
	/* 设置100%浏览器会自动监测当前宽度，因此在宽度缩小时布局会发生混乱 */
	width: 100%;
	min-width: 1200px;
	height: 66px;
	/* 设置透明度盒子 */
	/* opacity: 0.5; */
	background-color: rgba(17,17,17,0.75);
	/* 固定定位相对于窗口 */
	position: fixed;
}

.nav-l{
	width: auto;
	height: 100%;
	float: left;
	/* background-color: cyan; */
}
.nav-r{
	width: auto;
	height: 100%;
	float: right;
	margin-right: 7px;
	/* background-color: orange; */
}

.header-wrap .nav-l ul{
	position: relative;
	height: 100%;
}

.header-wrap .nav-l ul li{
	float: left;
	display: inline-block;
	height: 100%;
	line-height: 66px;
	width: 40px;
	margin: 0 31px;
	/* background-color: yellow; */
	text-align: center;
}
.header-wrap .nav-l ul li a{
	/* 设置颜色按下也会默认该颜色 */
	color: #ccc;
	font-size: 17px;
}

.header-wrap .nav-l ul li a:hover{
	text-shadow: 0 0 10px #69e0ff, 0 0 20px #69e0ff, 0 0 40px #69e0ff;
	color: #fff;
}
.header-wrap .nav-l ul li:nth-child(3) a{
	text-shadow: 0 0 10px #69e0ff, 0 0 20px #69e0ff, 0 0 40px #69e0ff;
	color: #fff;
}

.header-wrap .nav-l ul .rolling{
	position: absolute;
	z-index: 1;
	transition: all 0.2s ease-in-out 0s;
	/* transition:ease 0.5s; */
	background-color: rgb(105, 224, 255);
	height: 5px;
	left: 308px;
	width: 40px;
	top: 0px;
}
/* 设置滑动动画效果 */
.header-wrap .nav-l ul li:nth-child(4):hover~div{
	left: 410px;
}
.header-wrap .nav-l ul li:nth-child(5):hover~div{
	left: 512px;
}
.header-wrap .nav-l ul li:nth-child(6):hover~div{
	left: 614px;
}
.header-wrap .nav-l ul li:nth-child(7):hover~div{
	left: 716px;
}
.header-wrap .nav-l ul li:nth-child(8):hover~div{
	left: 818px;
}
.header-wrap .nav-l ul li .sdbtn{
	border: none;
	background-color: transparent;
	margin-left: 5px;
	height: 100%;
	display: flex;
	align-items: center;
}
.header-wrap .nav-l ul .logo{
	float: left;
	display: block;
	/* 未设置宽高超出的图片将无法显示 */
	width: 120px;
	height: 100%;
	background: url('../img/yuanshenlogo.png') no-repeat center center;
	margin-left: 0;
	margin-right:28px;
	/* background-size: 200px 100%; */
}

.header-wrap .nav-l ul li:nth-child(1) {
	/* background-color: yellow; */
	margin-left: 65px;
	margin-right: 23px;
}

.header-wrap .nav-l ul li span{
	display: block;
	width: 30px;
	height: 30px;
}
.header-wrap .nav-l ul li span img{
	margin-left: 0;
	margin-right: 0;
	height: 30px;
	width: 30px;
}

/* 右边盒子—————————————————————————— */

.header-wrap .nav-r a{
	display: inline-block;
	float: right;
	height: 100%;
	line-height: 66px;
	font-size: 17px;
	color:#ccc;
	/* img图片被视块元素用align-items单行交叉轴对齐,span未被视为块元素 */
	display: flex;
	align-items: center;
	margin-right: 32px;
	/* background-color: yellow; */
}
.header-wrap .nav-r a img{
    margin-left: 18px;
    width: 27px;
    height: 27px;
    opacity: 0.6;
	
}
.header-wrap .nav-r a:hover{
	color: #fff;
}
.header-wrap .nav-r a:hover img{
	opacity: 1;
}